﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmltopic</title>
    <!-- <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script> -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <style>
        * {
            margin: 0;
        }

        html {
            background: #fff;
        }

        .test {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 100px;
            background-color: #fff;
            display: inline-block;
            vertical-align: top;
        }

        canvas {
            margin-right: 5px;
        }

        .down {
            float: left;
            margin: 40px 10px;
        }

        .down2 {
            float: left;
            margin: 40px 30px;
        }
    </style>
</head>
<body>
    <div style="border-bottom:solid;width:300px"></div>
    <div class="test">测试</div>
    <div class="test">测试</div>
    <div class="test">测试</div>
    <div class="test">测试</div>
    <div class="test">测试</div>
    <div><a class="down" href="" download="downImg">生成图片</a></div>
    <div id="canvas">
        <img src="" style="display: block;">
        lex-start（默认值）：左对齐
        flex-end：右对齐
        center： 居中
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    </div>
    <script>
        html2canvas(document.getElementById('canvas')).then(function (canvas) { document.body.appendChild(canvas); });
    </script>
    <!-- <div><a class="down2" href="" download="downImg">生成图片</a></div> -->
    <script>
        //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
        //html2canvas(document.querySelector('div')).then(function(canvas) {
        // document.body.appendChild(canvas);
        //});
        //创建一个新的canvas
        var canvas2 = document.createElement("canvas");
        let _canvas = document.querySelector('html');
        //此处可换body，或div等
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        // var context = canvas.getContext("2d");
        // context.translate(0,0);
        var context = canvas2.getContext("2d");
        context.scale(2, 2);
        html2canvas(document.querySelector('html'),
        { canvas: canvas2 }).then(function (canvas) {
            //此处html可换body，或div等
            //document.body.appendChild(canvas);
            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
            document.querySelector(".down").setAttribute('href', canvas.toDataURL());
        });
    </script>


    <script language="javascript">
        //这是另一种写法
        // $(function () {
        // $(".down2").click(function () {
        // html2canvas($(".test")).then(function (canvas) {
        // var imgUri = canvas.toDataURL("image/png").replace("image/png",     "image/octet-stream"); // 获取生成的图片的url
        // window.location.href = imgUri; // 下载图片
        // });
        //html2canvas($('.tongxingzheng_bg'), {
        // onrendered: function (canvas) {
        // var data = canvas.toDataURL("image/png");//生成的格式
        // //data就是生成的base64码啦
        // alert(data);
        // }
        //});
        // });
        // });

        format("08 24 2020 12:00AM");
        function format(date) {
            var arr = date.split(" ");
            var result = arr[2] + "-" + arr[1] + "-" + arr[0] + " " + arr[3];
            console.log(result);
            return result;
        }

    </script>
</body>

</html>